<template>
	<view class="wrap">
		<view class="list">
			<view class="item" v-for="item in list" :key="item.id" @click="getAddrObj(item)">
				<view class="baseInfo">
					<view class="nickName">
						{{ item.sname }}
						<span>{{ item.telphone }}</span>
					</view>
					<view class="addr">{{ item.province }}{{ item.city }}{{ item.sarea }}{{ item.address }}</view>
				</view>
				<div class="iconSelect"v-if="item.id=== id">
					<u-icon name="checkmark" color="#fff" size="20"></u-icon>
				</div>
				<div class="icon"  v-else></div>
				
			</view>
		</view>
		<view class="add">
			<view class="btn1">
				<u-button text="添加新地址" type="info" shape="circle" @click="addAddr()"></u-button>
			</view>
			<view class="btn2">
				<u-button text="确定" type="success" color="#21B579" shape="circle" @click="getAddr()"></u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			setShow: false,
			delShow: false,
			value: '1',
			userInfo: {},
			isDefault: '0',
			list: [],
			id: '',
			obj:{}
		};
	},
	onLoad(options) {
		console.log(options)
		this.getUserAddressList();
		if(options.addr){
			console.log(options.addr)
			let data = JSON.parse(options.addr)
			console.log(data)
			console.log(data.id)
			this.id = data.id
			this.obj = data
		}
		
	},
	methods: {
		getAddrObj(obj){
			console.log(obj)
			this.id = obj.id
			this.obj = obj
		},
		getAddr(){
			uni.navigateTo({
				url:`/pages/orderConfirm/orderConfirm?address=${JSON.stringify(this.obj)}`
			})
		},
		getUserAddressList() {
			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					console.log(res);
					that.userInfo = res.data;
					that.$api.post('/fit/addressList', { phone: res.data.phone }).then((res) => {
						if (res.retCode === '0000') {
							that.list = res.data;
						}
					});
				}
			});
		},
		addAddr(data) {
			console.log(data);
			let obj = { ...data, phone: this.userInfo.phone };
			let addrObj = null;
			if (obj) {
				addrObj = JSON.stringify(obj);
			}
			const url = obj ? `/pages/addAddr/addAddr?addrObj=${addrObj}&type=1` : `/pages/addAddr/addAddr?type=1`;
			uni.navigateTo({
				url: url
			});
		},
		
		confirmDel() {
			this.$api.post('/fit/deleteAddr', { addrId: this.id, phone: this.userInfo.phone }).then((res) => {
				if (res.retCode === '0000') {
					this.getUserAddressList();
					this.delShow = false;
				}
			});
		},
	}
};
</script>

<style scoped lang="scss">
.wrap {
	background-color: #f7f7f8;
	width: 90%;
	margin: 0 auto;
	padding-bottom: 100rpx;
	.list {
		margin-top: 30rpx;
		.item {
			padding: 20rpx 20rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.baseInfo {
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
				color: #333;
				margin-top: 24rpx;
				.addr {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #999;
				}
				.nickName {
					span{
						margin-left: 30rpx;
					}
				}
			}
			.icon {
				width: 50rpx;
				height: 50rpx;
				border-radius: 100%;
				background-color: #f7f7f8;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.iconSelect {
				width: 50rpx;
				height: 50rpx;
				border-radius: 100%;
				background-color: #21b579;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.add {
		position: fixed;
		bottom: 0rpx;
		padding-bottom: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		left: 0;
		right: 0;
		background-color: #f7f7f8;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btn1 {
			width: 30%;
		}
		.btn2 {
			width: 65%;
		}
	}
}
</style>
